<template>
  <view style="padding-top: 90rpx; height:calc(100vh - 400rpx);margin-bottom: 90px;">
    <view v-for="(x) in historyTextList"
          :key="x.id">
      <view class="my-msg"
            v-if="x.content && x.role==='user'">
        <view class="">
          <text userSelect>{{ x.content }}</text>
        </view>
        <view>
          <image mode="aspectFill"
                 src="@/static/ai/my/avatar.png"
                 alt="" />
        </view>
      </view>
      <view class="gpt-msg"
            v-if="x.content && x.role==='assistant'">
        <view class="aiImg">
          <image mode="aspectFill"
                 src="@/static/ai/my/ai.png"
                 alt="" />
        </view>
        <view class="content">
          <view class="sk"
                @click="isZk = !isZk"
                v-if="isZk && x.reasoning_content">
            <text class="zl-color-999">已深度思考</text>
            <image class=""
                   style="width: 20rpx;height: 30rpx;"
                   src="/static/aiCreate/right.png">
            </image>
          </view>
          <view v-else-if="x.reasoning_content && !isZk"
                class="zk"
                @click="isZk = !isZk">
            <view class="zl-m-b-20 zl-flex zl-row-between">
              <text class="zl-color-999">已深度思考</text>
              <image class=""
                     style="width: 30rpx;height:20rpx ;"
                     src="/static/aiCreate/down.png">
              </image>
            </view>
            <view style="width: 100%;color: #999;">
              <text userSelect>{{x.reasoning_content}}</text>
            </view>
          </view>

          <view class="contentItem">
            <text userSelect>
              {{ x.content }}
            </text>
            <view>
              <view class="copy-btn"
                    @click="$util.copy(x.content)">
                <text class="iconfont icon-fuzhi"></text>复制
              </view>
              <!-- <view class="refresh-btn" @click="refsh(x)">
							<text class="iconfont icon-shuaxin"></text>刷新
						</view> -->
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-show="loading">
      <view class="gpt-msg">
        <view class="aiImg">
          <image mode="aspectFill"
                 src="@/static/ai/my/ai.png"
                 alt="" />
        </view>
        <view class="content">
          <view class="contentItem">
            <text class="loading">
              AI正在思考中<text></text>
            </text>
            <!-- <text :class="loading ? 'cursor' : ''"></text> -->
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "ChatList",
  components: {},
  created () { },
  props: {
    type: {
      default: 'chat',
      type: String
    },
    historyTextList: {
      default: [],
      type: Array
    },

    loading: {
      default: false,
      type: Boolean
    },
    sparkResult: {
      default: '',
      type: String
    }
  },
  data () {
    return {
      userAvatar: '',
      isZk: true
    }
  },
  methods: {
    refsh (d) {
      this.$emit('refsh', d)
    }
  }
}
</script>

<style lang="scss" scoped>
.gpt-time {
  text-align: center;
  font-size: 24rpx;
  margin-bottom: 25rpx;
  margin-top: 30rpx;
}

.my-msg {
  padding-right: 20rpx;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 30rpx;

  & > view {
    &:nth-child(1) {
      max-width: 562rpx;
      background: #577bed;
      border-radius: 30rpx 0 30rpx 30rpx;
      color: #fff;
      font-size: 26rpx;
      padding: 20rpx 20rpx 20rpx 30rpx;
    }

    &:nth-child(2) {
      width: 60rpx;
      height: 60rpx;
      margin-left: 16rpx;

      image {
        border-radius: 50%;
        width: 60rpx;
        height: 60rpx;
      }
    }
  }
}

.gpt-msg {
  padding-left: 20rpx;
  display: flex;
  margin-bottom: 30rpx;

  .content {
    .sk {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 620rpx;
      margin-bottom: 20rpx;
      background-color: #fff;
      height: 80rpx;
      padding: 0 30rpx;
      font-size: 24rpx;
      border-radius: 10rpx;
    }
    .zk {
      // display: flex;
      // justify-content: space-between;
      // align-items: center;
      width: 620rpx;
      margin-bottom: 20rpx;
      background-color: #fff;
      // height: 80rpx;
      padding: 30rpx;
      font-size: 24rpx;
      border-radius: 10rpx;
    }
    .contentItem {
      width: 620rpx;
      background: #fff;
      border-radius: 0 30rpx 30rpx 30rpx;
      padding: 20rpx 27rpx 30rpx 30rpx;
      color: #333;
      font-size: 26rpx;
      .copy-btn {
        color: #567aed;
        text-align: right;
      }

      // & > view {
      //   &:nth-child(2) {
      //     display: flex;
      //     justify-content: flex-end;
      //     padding-top: 30rpx;

      //     .copy-btn {
      //       color: #567aed;
      //     }

      //     .refresh-btn {
      //       color: #fab62e;
      //       margin-left: 30rpx;
      //     }

      //     & > view {
      //       display: flex;
      //       align-items: center;

      //       text {
      //         margin-right: 8rpx;
      //       }
      //     }
      //   }
      // }
    }
  }

  .aiImg {
    width: 60rpx;
    height: 60rpx;
    margin-right: 16rpx;

    image {
      border-radius: 50%;
      width: 60rpx;
      height: 60rpx;
    }
  }
}

.mj-btns {
  & > view {
    display: flex;
    flex-wrap: wrap;
    width: 100%;

    & > view {
      padding-left: 20rpx;
      padding-right: 20rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      margin-right: 20rpx;
      margin-bottom: 20rpx;
      background: #4e5058;
      border-radius: 8rpx;
      cursor: pointer;
    }
  }
}

.chat-gpt-img {
  max-width: 100%;
}

.cursor {
  border-right: 6px solid transparent;
  animation: text 3.5s steps(15, end), blink-caret 0.75s step-end infinite;
}
// .loading {
//   width: 300rpx;
//   font-size: 30rpx;
//   color: #567aed;
//   text-align: center;
// }
@keyframes text-change {
  0% {
    content: ".";
  }
  33% {
    content: "..";
  }
  66% {
    content: "...";
  }
}
.loading {
  font-size: 26rpx;
  color: #666;
}
.loading::after {
  content: ".";
  animation: text-change 2s infinite;
}
</style>